// pages/bill/show.js
import api from '../../utils/api'
import { uncollectedReport } from '../../utils/conf'

Page({
  width: 0, // 窗口宽度
  /**
   * 页面的初始数据
   */
  data: {
    data: [],
    prurl: ''
  },

  save: function () {
    var that = this;
    if (!that.data.prurl) {
      wx.showToast({
        title: '缺少url',
      })
      return;
    }
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let id = JSON.parse(options.id);
    this.getData(id)

    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        // console.log(res)
        // 获取窗口宽高
        this.width = res.windowWidth
      }
    })
  },

  getData: function (id) {
    let that = this
    api.post(uncollectedReport, {
      id: JSON.stringify(id)
    })
      .then(res => {
        // console.log(res.data)
        that.setData({
          data: res.data
        })
        that.drawSJ()
      }).catch(err => {
        console.log(err)
      })
  },

  drawSJ: function () {
    let that = this
    // console.log(that)
    let bill = that.data.data
    // console.log(that.data.data)
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.rect(1, 1, this.width - 2, 298)
    ctx.stroke()
    // 第1行
    ctx.setFontSize(20)
    ctx.textAlign = 'center'
    ctx.fillText('房 租 收 款 收 据 单', (this.width - 2) / 2, 25);
    // 第2行
    ctx.setFontSize(13)
    ctx.textAlign = 'left'
    if (!bill.end_time) {
      ctx.textAlign = 'center'
      ctx.fillText('(退房清算)', (this.width - 2) / 2, 50);
      ctx.setFontSize(13)
      ctx.textAlign = 'left'
      ctx.fillText('房号:' + bill.number_id, 5, 75);
    } else {
      ctx.fillText('房号:' + bill.number_id, 5, 55);
      ctx.fillText('租期:' + bill.start_time + '至' + bill.end_time.substring(0, 10), 5, 75);
    }
    // 第3行 电费
    let temp1 = '电费:' + bill.electricity_meter_this_month + '-' + bill.electricity_meter_last_month + '='
      + bill.electricity_consumption + '*' + bill.electricity_price + '=' + bill.electricity
    ctx.fillText(temp1, 5, 95);
    // 第4行 水费
    temp1 = '水费:' + bill.water_meter_this_month + '-' + bill.water_meter_last_month + '='
      + bill.water_consumption + '*' + bill.water_price + '=' + bill.water
    ctx.fillText(temp1, 5, 115);
    // 第5行 租金
    temp1 = '租金:' + bill.rental
    ctx.fillText(temp1, 5, 135);
    // 第6行 押金
    temp1 = '押金:' + bill.deposit
    ctx.fillText(temp1, 5, 155);
    // 第7行 其他费用
    temp1 = '其他费用:' + bill.other_charges
    ctx.fillText(temp1, 5, 175);
    // 第8行 合计
    temp1 = '合计:' + bill.total_money
    ctx.fillText(temp1, 5, 195);
    // 第9行 备注
    bill.note = '备注:' + bill.note
    let note = bill.note.split(' ')
    for (let index = 0; index < note.length; index++) {
      ctx.fillText(note[index], 5, 215 + index * 20);
    }
    ctx.draw(true, () => {
      wx.canvasToTempFilePath({
        x: 1,
        y: 1,
        width: this.width - 2,
        height: 298,
        destWidth: 960,
        destHeight: 960,
        canvasId: 'myCanvas',
        success: function (res) {
          that.setData({
            prurl: res.tempFilePath
          })
          // wx.hideLoading()
        },
        fail: function (res) {
          // wx.hideLoading()
        }
      })
    })
  }
})